<template>
    <div>
        <h4>构造器的声明周期</h4>
        <hr>

        <p>分数：{{count}}</p>
        <p>
            <button @click="plusHandler">加分</button>
        </p>
    </div>
</template>

<script>
    export default {
        name: "life",
        data() {
            return {
                count: 1
            }
        },
        methods: {
            plusHandler: function () {
                this.count++
            }
        },
        beforeCreate: function () {
            console.log('1-beforeCreate 初始化之后')
        },
        created: function () {
            console.log('2-created 创建完成')
        },
        beforeMount: function () {
            console.log('3-beforeMount 挂载之前')
        },
        mounted: function () {
            console.log('4-mounted 被创建')
        },
        beforeUpdate: function () {
            console.log('5-beforeUpdate 数据更新前')
        },
        updated: function () {
            console.log('6-updated 被更新后');
        },
        beforeDestroy: function () {
            console.log('7-beforeDestroy 销毁之前')
        },
        destroyed: function () {
            console.log('8-destroyed 销毁之后')
        }
    }
</script>

<style scoped>

</style>
